<template>
  <div class="item" v-show="data.show">
    <div class="item-head">
      <div class="item-head-label">
        <el-popover placement="right" width="fix-content" trigger="hover" :content="note" :disabled="icon">
          <template #reference>
            <div :class="['item-head-label-note', icon ? 'item-head-label-success' : 'item-head-label-error',
            ]">{{ icon ? '✔️' : '✖️' }}</div>
          </template>
        </el-popover>
        <span v-if="data.type != 3" style="margin: 5px">
          {{ String(data.name).split("$")[0] }}
        </span>
        <div v-else>
          <el-select v-model="data.name.value" class="m-2" placeholder="Select" size="small">
            <el-option v-for="item in data.name.options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
      </div>
      <div class="item-head-value">
        <div v-if="
          data.type == 0 || (data.type == 3 && typeof data.value !== 'object')
        " style="width: 100%">
          <el-tooltip v-if="String(data.name).split('$').length > 1" placement="left-start" effect="light"
            style="width: 100%">
            <template #content>
              <div style="word-break: break-all; max-width: 250px; overflow: auto">
                {{ String(data.name).split("$")[1] }}
              </div>
            </template>
            <el-badge is-dot>
              <el-input v-model="data.value" :disabled="data.disable" @change="refresh" />
            </el-badge>
          </el-tooltip>
          <el-input v-else v-model="data.value" :disabled="data.disable" @change="refresh" />
        </div>
        <div v-if="data.type == 1">
          <el-select v-model="data.value.value" class="m-2" placeholder="Select" size="small" :disabled="data.disable"
            @change="refresh">
            <el-option v-for="item in data.value.options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div v-if="
          data.type == 4 || (data.type == 3 && typeof data.value === 'object')
        ">
          <el-tooltip v-if="String(data.name).split('$').length > 1" placement="left-start" effect="light"
            style="width: 100%">
            <template #content>
              <div>{{ String(data.name).split("$")[1] }}</div>
            </template>

            <el-badge is-dot>
              <el-select v-model="data.value.select.value" placeholder="Select" size="small" :disabled="data.disable"
                @change="refresh">
                <el-option v-for="item in data.value.select.options" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-badge>
          </el-tooltip>
          <el-select v-else v-model="data.value.select.value" placeholder="Select" size="small" :disabled="data.disable"
            @change="refresh">
            <el-option v-for="item in data.value.select.options" :key="item.value" :label="item.label"
              :value="item.value" />
          </el-select>
        </div>
      </div>
      <div v-if="
        data.type == 2 ||
        data.type == 4 ||
        (data.type == 3 && typeof data.value === 'object')
      " style="width: 100%">
        <el-collapse>
          <el-collapse-item>
            <div class="item-main">
              <!-- {{ data.value }} -->
              <div v-if="data.value.hasOwnProperty('kvs')">
                <el-input v-for="(item, idx) in data.value.kvs" :key="idx" v-model="item.value"
                  :disabled="data.disabled">
                  <template #prepend>{{ item.name }}</template>
                </el-input>
              </div>
              <div v-if="data.value.hasOwnProperty('years')">
                <el-scrollbar>
                  <div style="display: flex">
                    <div>
                      <el-tag effect="plain" style="width: 70px">
                        营运年份
                      </el-tag>
                    </div>
                    <div v-for="idx in data.value.years.number" :key="idx">
                      <el-tag effect="light">
                        {{ idx }}
                      </el-tag>
                    </div>
                  </div>
                  <div style="display: flex">
                    <div>
                      <el-tag effect="plain" style="width: 70px">
                        实际年份
                      </el-tag>
                    </div>
                    <div v-for="idx in data.value.years.number" :key="idx">
                      <el-tag effect="light">
                        {{ idx + data.value.years.offset }}
                      </el-tag>
                    </div>
                  </div>
                  <div style="display: flex">
                    <div>
                      <el-tag effect="plain" style="width: 70px">
                        <span v-if="data.value.years.hasOwnProperty('name')">
                          {{ data.value.years.name }}
                        </span>
                        <span v-else>
                          费 用
                        </span>
                      </el-tag>
                    </div>
                    <div v-for="idx in data.value.years.number" :key="idx">
                      <el-input style="width: 80px; margin: 3px 5px" v-model="data.value.years.data[idx - 1]"
                        :disabled="data.disabled" @change="refresh(idx - 1)">
                      </el-input>
                    </div>
                  </div>
                </el-scrollbar>
              </div>
              <div v-if="data.value.hasOwnProperty('bodys')">
                <div v-for="(item, idx) in data.value.bodys" :key="idx">
                  <span>{{ item.name }}</span>
                  <item v-for="(subItem, subKey, subIdx) in item.data" :key="subIdx" :data="subItem" :name="subKey"
                    :raw="raw">
                  </item>
                </div>
              </div>
              <!-- <div v-else>
                                error!
                            </div> -->
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { onMounted, ref } from "@vue/runtime-core";
import { watch } from "vue"
import constraint from "../tableData/constraint/index.js";
import constraintInput from "../tableData/constraint/input.js";

const props = defineProps({
  raw: Object,
  data: Object,
  name: String,
});

// console.log(props.data, props.name)

watch(
  () => props.data.value,
  (value) => {
    console.log(`${props.data.name} value is: ${value}`)
    refresh(value)
  }
)

const note = ref("")
const icon = ref(false);

const refresh = (payload) => {
  console.log("constraint", props.name);
  if (constraintInput.hasOwnProperty(props.name)) {
    let res = constraintInput[props.name](props, props.data.value, payload);
    if (res == "") {
      icon.value = true;
      note.value = ""
      if (constraint.hasOwnProperty(props.name)) {
        return constraint[props.name](props, props.data.value, payload);
      }
    } else {
      icon.value = false;
      note.value = res;
      // ElMessage({
      //   message: res,
      //   showClose: true,
      //   offset: 60,
      //   type: "error",
      // });
    }
  }
};

onMounted(refresh);
</script>
<style>
.item {
  padding-left: 3px;
  padding-right: 6px;
}

.item .el-collapse-item__content {
  padding-bottom: 0;
}

.item .el-collapse {
  border: none;
}

.item .el-collapse-item__header {
  height: auto;
  background-color: unset;
  border: none;
}

.item .el-select--small {
  width: 100%;
  min-width: 70px;
}

.item .el-input {
  /* width: 95%; */
  margin: 5px;
}

.el-popover.el-popper {
  min-width: unset;
}

.item-head {
  display: flex;
  min-height: 32px;
  line-height: 16px;
  font-size: 12px;
  margin-bottom: 5px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.item-head-label {
  width: 40%;
  line-height: 16px;
  font-size: 12px;
  display: inline-flex;
  color: var(--el-text-color-regular);
  margin-right: 5px;
  text-align: left;
}

.item-head-label-error {
  background-color: #f56c6c;
  border-color: #f56c6c;
}

.item-head-label-success {
  background-color: #67c23a;
  border-color: #67c23a;
}

.item-head-label-note {
  padding: 0 9px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  color: white;
}

.item-head-label-note:hover {
  cursor: pointer;
}

.item-head-value {
  width: 48%;
  line-height: 25px;
  /* min-width: 70px; */
}

.item-head-value .el-badge {
  width: 100%;
}

.item-head-value .el-badge__content--danger {
  background-color: #409eff;
}

.item-main {
  width: auto;
  height: 100%;
  border-style: dashed;
  border-width: 1px;
  border-color: lightgrey;
}

.item-main .el-input-group__append {
  padding: 0px 10px;
}

.item-main .el-tag {
  width: 80px;
  height: 32px;
  margin: 3px 5px;
}
</style>